<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>忘记密码</title>
    <link rel="stylesheet" href="/auth/css/registry.css">
</head>
<body>
    <div id="error" th:if="${error!=null && error.msg != null}" th:attr="error=${error.msg}"></div>
    <div class="head">
        <div class="frame">	
            <a href="">
                <div class="logo"></div>
            </a>
            <div class="right-tip">
                去<a th:href="@{/auth/login.html}" id="btn-login">登录</a>
            </div>
        </div>
    </div>
    <div class="reg-page">
        <div class="mode">
            <div class="left">忘记密码</div>
            <div class="right"></div>
        </div>
        <form action="/auth/passwordfind" method="post" id="regForm">
            <!--手机号-->
            <div class="u-input">
                <label class="u-label">常用邮箱：</label>
                <input name="phone" id="email" class="i-input" placeholder="邮箱账号" type="text">
                <label id="email_error" class="error-label"></label>
            </div>
            <!--验证码-->
            <div class="u-input">
                <label class="u-label">验证码：</label>
                <input name="code" id="code" class="i-input sms" placeholder="输入验证码" type="text">
                <button type="button" id="codeBtn" class="btn-sms">获取验证码</button>
                <label id="code_error" class="error-label"></label>
            </div>
            <!--密码-->
            <div class="u-input">
                <label class="u-label" >密码：</label>
                <input name="password" id="password" class="i-input" placeholder="6-16位密码，区分大小写" type="password">
                <label id="password_error" class="error-label"></label>
            </div>
            <!--确认密码-->
            <div class="u-input">
                <label class="u-label" >确认密码：</label>
                <input id="password2" class="i-input" placeholder="再次输入密码" type="password" >
                <label id="password2_error" class="error-label"></label>
            </div>
            <div class="u-input">
                <label class="u-label"></label>
                <button type="submit" class="btn-reg" id="regBtn" >提交</button>
            </div>
        </form>
    </div>

</body>
<script src="/common/js/jquery.js"></script>
<script>


    let passwordFlag = false;
    let password2Flag = false;
    let emailFlag = false;
    let codeFlag = false;

    $(document).ready(function () {
        alertError();
    })

    function alertError() {
        if ($("#error").length > 0){
            let error = $("#error").attr("error");
            alert(error)
        }
    }

    $('#codeBtn').click(function () {
        // 检测email符合吗
        let email = $email.val()
        let emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        if (email == ''){
            $('#email_error').html('邮箱不能为空！')
            emailFlag = false;
        } else {
            if (emailReg.test(email)){
                $('#email_error').html('')
                emailFlag = true;
            } else {
                $('#email_error').html('请输入正确的邮箱地址！')
                emailFlag = false;
            }
        }
        //2、倒计时
        if ($(this).hasClass("disabled")) {
            //正在倒计时
        } else {
            if (emailFlag){
                //可以发送验证码
                //1、给指定手机号发送验证码
                $.get("/auth/sms/sendcode?phone=" + $('#email').val(),function (data) {
                    if (data.code != 0) {
                        alert(data.msg);
                    }
                });
                timeoutChangeStyle();
            } else {
                alert("请正确填写邮箱信息！")
            }
        }
    })

    var num = 60;
    function timeoutChangeStyle() {
        $('#codeBtn').attr("disabled", true)
        $('#codeBtn').css("cursor", "not-allowed")
        if (num == 0) {
            num = 60;
            $('#codeBtn').text("获取验证码");
            $('#codeBtn').attr("disabled", false);
            $('#codeBtn').css("cursor", "pointer")
        } else {
            var str = num + "s 后再次发送";
            $('#codeBtn').text(str);
            setTimeout("timeoutChangeStyle()", 1000);
        }
        num--;
    }

    $('#regForm').submit(function () {
        if (!(passwordFlag&&password2Flag&&emailFlag&&codeFlag)){
            alert("请按要求填写信息！")
            return false;
        }
    })

    // 检查密码，确认密码。
    const $password = $('#password')
    const $password2 = $('#password2')
    $password.blur(
        function(){
            let password = $password.val()
            let password2 = $password2.val()
            if (password == ''){
                $('#password_error').html('密码不能为空！')
                passwordFlag =  false;
            } else {
                $('#password_error').html('')
                passwordFlag =  true;
            }
    })
    $password2.blur(
        function(){
            let password = $password.val()
            let password2 = $password2.val()
            if (password2 == ''){
                $('#password2_error').html('确认密码不能为空！')
                password2Flag =  false;
            } else {
                if (password == password2){
                    $('#password2_error').html('')
                    password2Flag =  true;
                } else {
                    $('#password2_error').html('两次密码输入不同！')
                    password2Flag =  false;
                }
            }
        })


    // 检查email
    const $email = $('#email')
    $email.blur(function(){
        let email = $email.val()
        let emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        if (email == ''){
            $('#email_error').html('邮箱不能为空！')
            emailFlag = false;
        } else {
            if (emailReg.test(email)){
                $('#email_error').html('')
                //设置可以点击发送验证码
                emailFlag = true;
            } else {
                $('#email_error').html('请输入正确的邮箱地址！')
                emailFlag = false;
            }
        }
    })

    const $code = $('#code')
    $code.blur(function(){
        let code = $code.val()
        if (code == ''){
            $('#code_error').html('验证码不能为空！')
            codeFlag = false;
        } else {
            $('#code_error').html('')
            codeFlag = true;
        }
    })

</script>
</html>